<template>
  <div>
    <el-form :model="formData" :rules="formRules" inline ref="formData" label-position="top" class="row-form">
      <el-card class="box-card">
        <div class="card-view">

          <div class="card-title">基础信息</div>

          <el-form-item label="商品名称" prop="name" class="form-item-css">
            <el-input v-model="formData.name" placeholder="请输入"/>
          </el-form-item>

          <el-form-item label="规格" prop="norms" class="form-item-css">
            <el-input v-model="formData.norms" placeholder="请输入"/>
          </el-form-item>

          <el-form-item label="价格" prop="price" class="form-item-css">
            <el-input type="number" v-model="formData.price" placeholder="请输入"/>
          </el-form-item>

          <el-form-item label="服务提供商名称" prop="providerName" class="form-item-css">
            <el-input v-model="formData.providerName" placeholder="请输入"/>
          </el-form-item>

          <el-form-item label="提供商联系方式" prop="providerPhone" class="form-item-css">
            <el-input type="number" v-model="formData.providerPhone" placeholder="请输入" :maxlength="11"/>
          </el-form-item>

          <el-form-item label="商品标签" prop="goodsLabel" class="form-item-css">
            <el-input v-model="formData.goodsLabel" placeholder="请输入，多个用逗号隔开"/>
          </el-form-item>

          <el-form-item label="类型" prop="type" class="form-item-css">
            <el-select v-model="formData.type" placeholder="请选择" clearable @clear="formClear('type')"
                       style="width: 100%">
              <el-option :label="item.name" :value="item.code - 0" v-for="(item, index) in typeList" :key="index"/>
            </el-select>
          </el-form-item>

          <div class="form-item-css"></div>
          <el-form-item label="封面图片" prop="goodsCover" class="form-item-css">
            <div class="image-view" v-if="formData.goodsCover">
              <el-image :src="formData.goodsCover" fit="cover" style="width: 100%; height: 100%"></el-image>
              <i class="el-icon-circle-close" @click="formData.goodsCover = null"></i>
            </div>
            <UploadFile v-model="formData.goodsCover" v-else style="width: 100%"/>
          </el-form-item>
          <div class="form-item-css"></div>
          <el-form-item label="商品图片" prop="goodsImg" style="width: 100%;">
            <div class="row-start">
              <div class="image-list" v-for="(item, index) in formData.goodsImg">
                <el-image :src="item" fit="cover" class="image-item"></el-image>
                <div class="row-div image-hover">
                  <i class="el-icon-delete" @click="imageListDelete(index)"></i>
                </div>
              </div>
              <UploadFile multiple :file-list="formData.goodsImg" listType @change="fileListChange"/>
            </div>
          </el-form-item>

          <div class="form-item-css"></div>
          <el-form-item label="商品详情" prop="goodsInfo" style="width: 100%">
            <Tinymce v-model="formData.goodsInfo"></Tinymce>
          </el-form-item>
        </div>
      </el-card>

      <div class="row-div" style="margin: 30px 0">
        <el-button style="width: 300px" @click="$router.push('/serviceCommodityManage/serviceCommodityList')">取 消</el-button>
        <el-button type="primary" style="width: 300px" @click="onSubmit">提 交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>

  import { mapGetters } from 'vuex'
  import Tinymce from '@/components/Tinymce'

  export default {
    components: {
      Tinymce
    },
    computed: {
      ...mapGetters(['confirm'])
    },
    name: 'parkAdd',
    data() {
      return {
        alterUserId: true,
        detailId: null, // 详情ID
        gardenServerList: [], // 园区服务列表
        typeList: [], // 类型列表
        formData: {
          goodsCover: null, // 商品封面
          goodsImg: null, // 商品图
          goodsInfo: null, // 商品详情
          goodsLabel: null, // 商品标签
          id: null, //
          name: null, // 商品名字
          norms: null, // 规格
          price: null, // 价格
          providerName: null, // 服务提供商名称
          providerPhone: null, // 提供商联系方式
          type: null // 类型 (资源表code)
        },
        formRules: {
          goodsInfo: [
            { required: true, message: '请输入商品详情', trigger: 'blur' }
          ],
          goodsLabel: [
            { required: true, message: '请输入商品标签', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入商品名字', trigger: 'blur' }
          ],
          norms: [
            { required: true, message: '请输入规格', trigger: 'blur' }
          ],
          price: [
            { required: true, message: '请输入价格', trigger: 'blur' }
          ],
          providerName: [
            { required: true, message: '请输入服务提供商名称', trigger: 'blur' }
          ],
          providerPhone: [
            { required: true, message: '请输入提供商联系方式', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择类型', trigger: 'change' }
          ],
          goodsCover: [
            { required: true, message: '请上传商品封面', trigger: 'change' }
          ],
          goodsImg: [
            { required: true, message: '请上传商品图', trigger: 'change' }
          ]
        }
      }
    },
    async beforeMount() {
      await this.getTypeList()
      this.detailId = this.$route.query.id || null
      if (this.detailId) await this.getDetails()
    },
    methods: {
      /**
       * 获取类型
       */
      async getTypeList() {
        const res = await this.$ajax.get('/resource/table/list?type=fuwushangpintype')
        this.typeList = res.rows
      },
      /**
       * 新增
       */
      onSubmit() {
        this.$refs.formData.validate(async(valid) => {
          if (!valid) return this.$message.warning('请完善信息')
          const formData = JSON.parse(JSON.stringify(this.formData))
          const reg = /^\d{11}$/
          if (formData.goodsLabel.split(',').length > 2) return this.$message.warning('标签内容较多')
          if (!reg.test(formData.providerPhone)) return this.$message.warning('请输入正确的手机号码')
          formData.goodsImg = formData.goodsImg.join(',')
          formData.visitPath = '/pagesEnterprise/pages/enterpriseGoodsDetail/enterpriseGoodsDetail' // 访问路径
          const url = this.detailId ? '/wx/serviceGoods/update' : '/wx/serviceGoods/backstage/add'
          await this.$ajax.post(url, formData)
          this.$message.success('操作成功!')
          this.$router.push('/serviceCommodityManage/serviceCommodityList')
        })
      },
      /**
       * 获取详情
       */
      async getDetails() {
        const res = await this.$ajax.get(`/wx/serviceGoods/info?id=${this.detailId}`)
        res.data.goodsImg = res.data.goodsImg ? res.data.goodsImg.split(',') : []
        this.formData = res.data
      },
      /**
       * 图片列表删除事件
       */
      imageListDelete(index) {
        this.formData.goodsImg.splice(index, 1)
      },
      /**
       * 内容图片变化事件
       */
      fileListChange(event) {
        this.formData.goodsImg = event
      }

    }
  }
</script>

<style scoped lang="scss">
  .box-card + .box-card {
    margin-top: 20px;
  }

  .image-list {
    width: 148px;
    height: 148px;
    position: relative;
    margin-right: 10px;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    &:hover > .image-hover {
      display: flex;
      z-index: 1;
    }
    .image-item, .image-hover {
      width: 100%;
      height: 100%;
      border-radius: 6px;
    }
    .image-hover {
      position: absolute;
      top: 0;
      left: 0;
      display: none;
      background: rgba(0, 0, 0, 0.5);
      color: white;
      font-size: 20px;
    }
  }

  .card-view {
    width: 100%;
    .card-title {
      width: 200px;
      font-weight: bold;
      font-size: 18px;
      padding-bottom: 10px;
      margin-bottom: 20px;
      position: relative;
      &:before {
        content: "";
        width: 200px;
        height: 1px;
        background: #000000;
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }

    .form-item-css {
      width: calc(100% / 3 - 10px);
      position: relative;
      .delete-but {
        position: absolute;
        color: red;
        z-index: 2;
        right: 0;
        top: -40px;
      }
    }
  }

  .image-view {
    width: 100%;
    height: 178px;
    position: relative;
    .el-icon-circle-close {
      font-size: 30px;
      color: red;
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 100;
    }
    .el-icon-circle-close:hover {
      cursor: pointer;
    }
  }
</style>
